Skip to content

Fix shadow-inherit, inset-shadow-inherit, drop-shadow-inherit, and text-shadow-inherit#17647

Merged
philipp-spiess merged 5 commits into
tailwindlabs:mainfrom
wongjn:fix-shadow-inherit
Apr 11, 2025
Merged

Fix shadow-inherit, inset-shadow-inherit, drop-shadow-inherit, and text-shadow-inherit#17647
philipp-spiess merged 5 commits into
tailwindlabs:mainfrom
wongjn:fix-shadow-inherit

Conversation

@wongjn

@wongjn wongjn commented Apr 11, 2025

Copy link
Copy Markdown
Collaborator

Fixes #17643.

This PR completely removes the color-mix() function for shadow-inherit. This does mean intensity and alpha channel support has been removed when using shadow-inherit1.

With intensity modifiers in #17398, all colors are wrapped in color-mix(). However, it seems inherit does not work as a value in color-mix() in Firefox or Chrome (don't have a means to test Safari).

Footnotes

  1. While writing this, I noticed other color utilities allow alpha channel modifier syntax for inherit - do we want to look at removing those too?

@wongjn wongjn requested a review from a team as a code owner April 11, 2025 08:49
@philipp-spiess

Copy link
Copy Markdown
Contributor

@wongjn Mind also fixing this for the other shadow types? https://play.tailwindcss.com/24BUkYoWNi 😬

@wongjn

wongjn commented Apr 11, 2025

Copy link
Copy Markdown
Collaborator Author

Your wish is my command 🫡

@wongjn wongjn force-pushed the fix-shadow-inherit branch from b1d722f to dfb352f Compare April 11, 2025 10:38
@philipp-spiess philipp-spiess changed the title Fix shadow-inherit Fix shadow-inherit, inset-shadow-inherit, drop-shadow-inherit, and text-shadow-inherit Apr 11, 2025

@philipp-spiess philipp-spiess left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sweeet, thanks man!

Comment thread CHANGELOG.md
- Ensure the `color-mix(…)` polyfill creates fallbacks for theme variables that reference other theme variables ([#17562](https://github.com/tailwindlabs/tailwindcss/pull/17562))
- Fix brace expansion in `@source inline('z-{10..0}')` with range going down ([#17591](https://github.com/tailwindlabs/tailwindcss/pull/17591))
- Ensure container query variant names can contain hyphens ([#17628](https://github.com/tailwindlabs/tailwindcss/pull/17628))
- Ensure `shadow-inherit`, `inset-shadow-inherit`, `drop-shadow-inherit`, and `text-shadow-inherit` inherits the shadow color ([#17647](https://github.com/tailwindlabs/tailwindcss/pull/17647))

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah turns out it's 4, you added drop-shadow-inherit to that list but fixed it for inset-shadow-inherit. 🙈 I added a test for drop-shadow-inherit 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

shadow-inherit is broken

2 participants